<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 


    
 -->

<body>
    <script>
        //重复声明
        //已经存在的变量（函数 参数） 又声明了一遍
        //var 允许重复声明 let const 不允许重复声明
        var a = 1;
        //……
        var a = 2;
        console.log(a); //2


        let a = 1;
        let a = 3;
        console.log(a); //报错


        // function fun(a) {
        //     let a = 1;
        // }

        // fun() 报错  a已经重复声明


        //变量提升  var会提升变量的声明到当前作用域的顶部
        console(a); //undefined
        var a = 10;

        //相当于
        var a;
        console(a); //undefined
        a = 10;
        console(a); //10

        //let const 不存在变量提升
        // console(a);
        // let a = 10;

        // 养成良好的习惯 对于所有的变量或常量 做到先声明后使用的习惯


        //暂时性死区
        //var  无暂时性死区
        //只要作用域内存在let const他们所声明的变量或常量就自动绑定这个区域
        //不再受到外部作用域的影响
        let a = 2;

        function fn() {
            console.log(a); //报错
            let a = 3;
        }
        fn();


        let b = 1;

        function fn1() {
            console.log(b); //1
        }

        fn1();



        //块级作用域
        //什么是作用域链：内层作用域——外层作用域—全局作用域
        //块级作用域：{}  for(){} while(){} do {} while() if(){} switch(){}
        //var 无块级作用域
        for (var i = 0; i < 3; i++) {
            // console.log(i); //0 1 2
        }

        console.log(i); //3

        //let const块级作用域
        for (let i = 0; i < 3; i++) {
            // console.log(i); //0 1 2
        }

        console.log(i); //报错
    </script>
</body>

</html>